﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>COFEWS Mobile UI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <script src="assets/javascripts/lib/jquery-1.7.2.js" type="text/javascript"></script>
    <script src="assets/javascripts/lib/jquery.tmpl.js" type="text/javascript"></script>
    <script src="assets/javascripts/lib/MobileInit.js" type="text/javascript">></script>
    <script src="assets/javascripts/lib/jquery.mobile-1.1.1.js" type="text/javascript"></script>
    <script src="assets/javascripts/lib/jquery.mobile.simpledialog2.min.js" type="text/javascript"></script>
    <script src="assets/javascripts/lib/spine.js" type="text/javascript"></script>
    <script src="assets/javascripts/lib/date.js" type="text/javascript"></script>
    <script src="assets/javascripts/lib/MobileUtils.js" type="text/javascript">></script>
    <script src="assets/javascripts/controllers/SignIn.js" type="text/javascript"></script>
    <script src="assets/javascripts/controllers/Options.js" type="text/javascript"></script>
    <script src="assets/javascripts/models/Link.js" type="text/javascript"></script>
    <script src="assets/javascripts/models/Entry.js" type="text/javascript"></script>
    <script src="assets/javascripts/models/EntryMeta.js" type="text/javascript"></script>
    <script src="assets/javascripts/models/EntryList.js" type="text/javascript"></script>
    <script src="assets/javascripts/controllers/EntryItem.js" type="text/javascript"></script>
    <script src="assets/javascripts/controllers/EntryItemListBase.js" type="text/javascript"></script>
    <script src="assets/javascripts/controllers/EntryItemList.js" type="text/javascript"></script>
    <script src="assets/javascripts/controllers/Navigator.js" type="text/javascript"></script>
    <script src="assets/javascripts/controllers/EntryMetaItem.js" type="text/javascript"></script>
    <script src="assets/javascripts/controllers/EntryDetailList.js" type="text/javascript"></script>
    <script src="assets/javascripts/controllers/HierarchyItem.js" type="text/javascript"></script>
    <script src="assets/javascripts/controllers/HierarchyItemList.js" type="text/javascript"></script>
    <script src="assets/javascripts/controllers/Search.js" type="text/javascript"></script>
    <script src="assets/javascripts/controllers/MobileApp.js" type="text/javascript"></script>
    <script type="text/javascript">
        COFE.MobileApp.init();               
    </script>
    
    <!--<link href="assets/javascripts/stylesheets/jqm-icon-pack-2.1.2-fa.css" rel="stylesheet"
        type="text/css" /> -->    
        <link href="assets/javascripts/stylesheets/jquery.mobile-1.1.1.css" rel="stylesheet"
        type="text/css" />   
    <link href="assets/javascripts/stylesheets/jquery.mobile.simpledialog.min.css" rel="stylesheet"
        type="text/css" />
    <script type="text/x-jquery-tmpl" id="entryItemTemplate">
      <a href="" rel="external" class="changePath" >
      <image src="${icon}&size=large" />      
      <h3>${label}</h3>
	  {{if basetype == "file" }}
      <p><strong>${length}kb</strong></p>
      {{else}}      
         {{if totalcount }}
           <p class="ui-li-count"><strong>${totalcount}</strong></p>         
         {{/if}}
      {{/if}} 
      
      </a>
    </script>
    <script type="text/x-jquery-tmpl" id="hierarchyItemTemplate">            
    <option="${path}">${label}</option>
    </script>
    <script type="text/x-jquery-tmpl" id="entryDetailTemplate">             
    <h3><image src="${entry.icon}&size=small" /> ${entry.label}</h3>
    <ul data-role="listview">
      <li><h3>Item</h3><p>(${selectedIndex} / ${itemCount})</p></li>
      <li><h3>Type</h3><p>${entry.basetype}</p></li>
      <li><h3>Id</h3><p>${entry.id}</p></li>
      <li><h3>Time</h3><p>${entry.time}</p></li>
      {{each entry.links}}
      <li><h3>${rel}</h3>
      {{if mediatype == "image/png"}}
        <p><img src="${url}" max-width="250" max-height="250" />
           <br /><a href="${url}" rel="external">${mediatype}</a></p>
        </p>
      {{else}}
        <p><a href="${url}" rel="external">${mediatype}</a></p></li>   
      {{/if}}
      
            
      {{/each}}  
    </ul>         
    </script>
    <script type="text/x-jquery-tmpl" id="metadataTemplate">            
    <li><h3>${key}</h3><p>${value}</p></li>
    </script>
</head>
<body>
    
    <div data-role="page" id="list">
        <div data-role="header" class="header" data-position="fixed">
            <a href="#hierarchy" data-icon="folder-close">Folder</a> 
            <a href="#options" data-rel="dialog" data-iconpos="right"
                data-icon="gear">Options</a>
            <h1 class="headerCaption">
                COFEWS Mobile UI</h1>
        </div>
        <!-- /header -->
        <div data-role="content">            
            <div class="ui-body ui-body-c" style="margin: -15px -15px 0px -15px">
            <div data-role="controlgroup" data-type="horizontal" style="margin: -0px -15px">
                <a href="#" class="home" data-role="button" data-mini="true" data-icon="home">Home</a>
                <a href="#" class="back" data-role="button" data-mini="true" data-icon="arrow-l">Back</a>
                <!--<a href="#" class="up" data-role="button" data-mini="true" data-icon="arrow-u">Up</a>-->
                <a href="#" class="next" data-role="button" data-mini="true" data-icon="arrow-r">Next</a>                      
                <!--<a href="#" class="home" data-role="button" data-mini="true" data-iconpos="notext" data-icon="home"></a>
                <a href="#" class="back" data-role="button" data-mini="true" data-iconpos="notext" data-icon="arrow-l"></a>
                <a href="#" class="up" data-role="button" data-mini="true" data-iconpos="notext" data-icon="arrow-u"></a>
                <a href="#" class="next" data-role="button" data-mini="true" data-iconpos="notext" data-icon="arrow-r"></a>   -->       
            </div>
           </div>

            <ul id="entryList" data-role="listview" data-inset="false"    
                style="margin: 0px -15px"
                            
                data-filter="false" data-list-icon="gear">
            </ul>            
        </div>
        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#list" data-icon="grid" data-theme="b">List</a></li>
                    <li><a href="#details" data-icon="gear">Details</a></li>
                    <!--<li><a href="#setup" data-icon="info">Setup</a></li>-->
                </ul>
            </div>
            <!-- /navbar -->
        </div>
    </div>
    <div data-role="dialog" id="signin">
        <div data-role="header" data-position="fixed">
            <h1>
                COFEWS Mobile UI</h1>
        </div>
        <div data-role="content">
            <form id="signin_form">            
                Please login to access your files.
            <div data-role="fieldcontain">
                <label for="username">
                    Username</label>
                <input type="text" id="username" name="username" value="" />
            </div>
            <div data-role="fieldcontain">
                <label for="password">
                    Password</label>
                <input type="text" id="password" name="password" value="" />
            </div>
            </form>
            <a href="#" class="signin ui-btn-right" data-role="button" data-inline="true"
                    data-theme="b" data-icon="search">Login</a>            
        </div>
    </div>
    <div data-role="page" id="details">
        <div data-role="header" class="header" data-position="fixed">
            <a href="#" class="back" data-icon="arrow-l">Prev</a> <a href="#" data-iconpos="right"
                class="next" data-icon="arrow-r">Next</a>
            <h1 class="headerCaption">
                COFEWS Mobile UI</h1>
        </div>
        <!-- /header -->
        <div data-role="content">
            <div id="entryInfo">
            </div>
            <br />
            <div data-role="collapsible">
                <h3>
                    Entry metadata</h3>
                <div id="metadata">
                </div>
            </div>
        </div>
        <div data-role="footer" data-position="fixed">
            <!-- /navbar -->
            <div data-role="navbar">
                <ul>
                    <li><a href="#list" data-icon="grid">List</a></li>
                    <li><a href="#details" data-icon="gear" data-theme="b">Details</a></li>
                    <!--<li><a href="#setup" data-icon="info">Setup</a></li>-->
                </ul>
            </div>
        </div>
    </div>
    <div data-role="dialog" id="search">
        <div data-role="header" class="header" data-position="fixed">
            <h1 class="headerCaption">
                Search</h1>
        </div>
        <div data-role="content">
            Please either enter a <a href="http://cofe.codeplex.com/wikipage?title=Filter">search
                filter</a> string:
          
            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="searchParam">
                    Search Parameters:</label>
                <input type="search" name="searchParam" id="searchParam" value="" placeholder="e.g. root:{temp} filename:cofe filetype:dll subdir:true" />
            </div>
            Or update the fields below:
            <div data-role="fieldcontain">
                <label for="root">
                    Root:</label>
                <input type="text" name="root" id="root" value="" placeholder="path (e.g. {temp})" />

                <label for="filename">
                    Filename:</label>
                <input type="text" name="filename" id="filename" value="" placeholder="w/o ext (e.g. cofe)" />

                <label for="filetype">
                    Filetype:</label>
                <input type="text" name="filetype" id="filetype" value="" placeholder="extension (e.g. txt, pas, cs)" />
            </div>
            <!--<label for="subdir">
                    Include subdirectory:</label>
                <select name="subdir" id="subdir" data-role="slider">
                    <option value="off">Off</option>
                    <option value="on">On</option>
                </select>-->
            <fieldset data-role="controlgroup">
                <!--<legend>Subdir:</legend>-->
                <input type="checkbox" name="subdir" id="subdir" class="custom" checked="checked" />
                <label for="subdir">
                    Include subdirectory</label>
            </fieldset>
            <a href="#" data-role="button" data-rel="back" data-inline="true" data-icon="delete">
                Cancel</a> <a href="#" class="startSearch" data-role="button" data-inline="true"
                    data-theme="b" data-icon="search">Start</a>
        </div>
    </div>
    <div data-role="page" id="hierarchy">
        <div data-role="header" class="header" data-position="fixed">
            <a href="#" class="open" data-icon="folder-open">Folder</a>
            <a href="#" data-iconpos="right" class="up" data-icon="arrow-u">Up</a> 
            
            <h1 class="headerCaption">
                Folder Picker</h1>
        </div>
        <!-- /header -->
        <div data-role="content">
            <form action="#" method="get">
            <div id="entryHierarchyList">
            </div>
            </form>
            <a href="#" class="open" data-role="button" data-icon="folder-open">Open</a>
        </div>
        <div data-role="footer" data-position="fixed">
        </div>
    </div>
    <div data-role="page" id="options">
        <div data-role="header" class="header" data-position="fixed">
            <h1 class="caption">
                Options</h1>
        </div>
        <div data-role="content">
            <div data-role="controlgroup">
                 <a href="#" class="hierarchy" data-icon="folder-open" data-role="button">Folder view</a>
                 <a href="#" class="search" data-icon="search" data-role="button">Search</a>
            </div>
            <div data-role="controlgroup">
                <a href="#" class="signout" data-role="button">Signout</a>
                <a href="http://cofe.codeplex.com" data-transition="slide" data-role="button">About COFE</a>
            </div>
            <!--<a href="#" class="home" data-icon="home" data-role="button">Home directory</a>
           -->
           
            
            <!---->
            <!--  <ul id="setingList" data-role="listview" data-inset="false" data-filter="false" data-list-icon="gear">                
                <li></li>
                <li></li>
            </ul>-->
        </div>
    </div>
</body>
</html>
